<template>
  <div>
    <el-button size="mini" type="primary" plain @click="login">login</el-button>
    <el-button size="mini" type="danger" plain @click="logout">logout</el-button>
    <div class="box">box</div>
    <div class="box1">box1</div>
  </div>
</template>

<script>
  export default {
    methods: {
      logout() {
        this.$cookies.remove("user")
        this.$store.commit("updateId", 0)
        console.log(this.$store.getters.getId)
      },
      login() {
        this.$axios({
          url: '/data/data.json'
        }).then((data) => {
          let user = {
            "id": 10,
            "name": "yueyueniao"
          }
          this.$cookies.set("user", user)
          this.$store.commit("updateId", user.id)
          console.log(this.$store.getters.getId)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  $box1-bg:red;

  .box {
    width: 40px;
    height: 20px;
    background-color: $bg;
  }

  .box1 {
    width: 40px;
    height: 20px;
    background-color: $box1-bg;
  }
</style>
